<template>
    <div class="dropdown">
        <div class="drophead">
            <template v-if="$props.data.length<=$props.row">
                <template v-for="(item,index) in firstArr">
                    <span :class="$props.select==index?'actived':'normal'" @click="handleChoose(index)" :key="index">
                        <slot name="item-head" :content="item">{{item}}</slot>
                    </span>   
                </template>
            </template>
            <template v-else-if="$props.data.length>$props.row">
                <template v-for="(item,index) in firstArr">
                    <span :class="$props.select==index?'actived':'normal'" @click="handleChoose(index)" :key="index">
                        <slot name="item-head" :content="item">{{item}}</slot>
                    </span>
                </template>
                <slot name="more"></slot>
            </template>
        </div>
        <div class="dropmore" v-if="secondArr&&showmore">
            <template v-for="(item,index) in secondArr">
                <div :key="index" >
                    <template v-for="(sitem,sindex) in item">
                        <span :class="$props.select==(index*$props.row+sindex+$props.row-1)?'actived':'normal'" @click="handleChoose(index*$props.row+sindex+$props.row-1)" :key="sindex">
                            <slot name="item-more" :content="sitem">{{sitem}}</slot>
                        </span>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import _ from 'lodash';
export default {
    name:"DropDown",
    data(){
        return{
            firstArr:[],
            secondArr:[],
            close:true
        }
    },
    props:{
       data:{
           type:Array,
           required:true
       },
       showmore:{
           type:Boolean,
           default:false
       },
       row:{
           type:Number,
           default:4
       },
       handleSelect:{
           type:Function,
           default:null
       },
       select:{
           type:Number,
           default:0
       }
        
    },
    beforeMount() {
        if(this.$props.data&&this.$props.data.length<=this.$props.row){
            this.firstArr = this.$props.data
            this.secondArr = null;
        }else{
            this.firstArr = this.$props.data.slice(0,this.$props.row-1)
            this.secondArr = _.chunk(this.$props.data.slice(this.$props.row-1,this.$props.data.length-1),this.$props.row)
        }
    },
    methods:{
        handleChoose(data){
            this.$emit("handleSelect",data)
        }
    }
}
</script>

<style scoped lang="scss">
    .dropdown{
        display: inline-block;
        position: relative;
        .actived{
            background-color: #0b83fe;
            color: #fff;
            .itemStyle{
                border: none !important;
            } 
        }
        .normal{
            background-color: #fff;
        }
        .drophead{
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .dropmore{
            background-color: #fff;
        }
    }
</style>